<template>
  <div>
  </div>
</template>

<script>
// 导入图片
const img = require('@/assets/大声发.jpg');
const img2 = require('@/assets/鸡哥.jpg');
// 导入恐龙图片精灵图，多个元素合到一个图片中
const gameImg = require('@/assets/game.png');
// 导入utils.js
import { oc } from '@/utils/index.js'
// 导入pixi.js
import * as PIXI from 'pixi.js'
// 导入捆绑包pixi/asstes
import { Assets } from '@pixi/assets';
// 导入pixi滤镜包
import { OutlineFilter, TwistFilter } from 'pixi-filters';

// 创建应用
const app = new PIXI.Application({
  width: window.innerWidth,
  height: window.innerHeight,
  backgroundColor: 0xffffff,
  resolution: window.devicePixelRatio || 1,// 分辨率
  antialias: true, // 抗锯齿
})
// 将应用画布添加到DOM中
document.body.appendChild(app.view)

// 创建容器
const container = new PIXI.Container();
// 将容器添加到舞台中
app.stage.addChild(container);

// 创建恐龙游戏的一个基础精灵纹理
const baseTexture = PIXI.BaseTexture.from(gameImg);

// 根据基础纹理创建一个恐龙纹理
const dinosaurTexture = new PIXI.Texture(
  baseTexture, 
  new PIXI.Rectangle(75, 0, 88, 100),// 恐龙纹理的矩形区域, 分别是x, y, width, height
);
// 创建一个恐龙精灵
const dinosaurSprite = new PIXI.Sprite(dinosaurTexture);
// 隐藏恐龙精灵
dinosaurSprite.visible = false;
// 将恐龙精灵添加到容器中
container.addChild(dinosaurSprite);

// 恐龙跑步的动画帧
const runFrames = [
  new PIXI.Texture(baseTexture, new PIXI.Rectangle(1853, 0, 88, 100)),
  new PIXI.Texture(baseTexture, new PIXI.Rectangle(1941, 0, 88, 100)),
];
// 创建一个恐龙跑步的动画
const runAnimation = new PIXI.AnimatedSprite(runFrames);
runAnimation.animationSpeed = 0.1;// 动画速度
runAnimation.play(); // 播放动画
runAnimation.visible = false;// 隐藏动画
// 将恐龙跑步动画添加到容器中
container.addChild(runAnimation);

// 恐龙跳跃精灵
const jumpSprite = new PIXI.Sprite(
  new PIXI.Texture(baseTexture, new PIXI.Rectangle(1677, 0, 88, 100))
);
jumpSprite.x = 60;
jumpSprite.y = window.innerHeight - 50 - 100;
jumpSprite.visible = false;
// 将恐龙跳跃精灵添加到容器中
container.addChild(jumpSprite);

// 创建地面纹理
const groundTexture = new PIXI.Texture(
  baseTexture,
  new PIXI.Rectangle(0, 100, 2400, 30)
);
// 创建地面精灵
// const groundSprite = new PIXI.Sprite(
//   new PIXI.Texture(baseTexture, new PIXI.Rectangle(0, 100, 2400, 30))
// );// 需要用TilingSprite属性创建，否则没有tilePosition属性
// 根据地面纹理，创建地面平铺精灵
const groundSprite = new PIXI.TilingSprite(groundTexture);
// 设置地面精灵的宽高
groundSprite.width = window.innerWidth;
groundSprite.height = 30;
// 设置地面精灵的位置
groundSprite.position.set(0, window.innerHeight - 50);
// 将地面精灵添加到容器中
container.addChild(groundSprite);

// 创建仙人掌精灵
const cactusSprite = new PIXI.Sprite(
  new PIXI.Texture(baseTexture, new PIXI.Rectangle(515, 0, 30, 60))
);
// 设置仙人掌精灵的位置
cactusSprite.position.set(window.innerWidth/2, window.innerHeight - 50 - 60);
// 将仙人掌精灵添加到容器中
container.addChild(cactusSprite);

// 创建“开始游戏”的文字
const startText = new PIXI.Text('开始游戏', {
  fontFamily: 'Arial',
  fontSize: 36,
  fill: 0x333333,
  align: 'center',
});
// 设置“开始游戏”文字的位置
startText.position.set(window.innerWidth / 2, window.innerHeight / 2);
// 设置“开始游戏”文字的锚点
startText.anchor.set(0.5);
// 将“开始游戏”文字添加到容器中
container.addChild(startText);

// 开启文字点击事件
startText.interactive = true;
// 点击文字时，开始游戏
startText.on('click', () => {
  startGame();
});

// 游戏是否开始
let isGameStart = false;
// 开始游戏函数
function startGame() {
  // 游戏是否开始
  isGameStart = true;
  // 隐藏“开始游戏”文字
  startText.visible = false;
  // 显示恐龙跑步动画
  runAnimation.visible = true;
  // 修改恐龙跑步动画的位置
  runAnimation.position.set(60, window.innerHeight - 50 - 100);
}

// 游戏得分
let score = 0;
// 初始化跳跃的速度
let jumpVelocity = 20;
// 初始化重力
let gravity = 1;
// 游戏循环
app.ticker.add((delta) => {
  // 如果游戏没有开始，返回
  if(!isGameStart) return;
  // 地面移动
  groundSprite.tilePosition.x -= 10;// 地面移动速度
  // 仙人掌移动
  cactusSprite.x -= 10;
  // 仙人掌到达左边时，重新设置仙人掌的位置
  if(cactusSprite.x < -30) {
    cactusSprite.x = window.innerWidth;
    score++;
  }
  if(jumpSprite.visible) {
    jumpVelocity -= gravity;
    jumpSprite.y -= jumpVelocity;
    if(jumpSprite.y > window.innerHeight - 50 - 100) {
      jumpSprite.y = window.innerHeight - 50 - 100;
      jumpSprite.visible = false;
      runAnimation.visible = true;
    }
  }
  // 恐龙碰撞检测
  if(
    jumpSprite.y>cactusSprite.y-60 &&
    cactusSprite.x<jumpSprite.x+60 &&
    cactusSprite.x>jumpSprite.x-60
  ){
    // 游戏结束
    gameOver();
    startText.visible = false;
    // 显示游戏结束的文字
    const gameOverText = new PIXI.Text(`游戏结束，最后得分：${score}`, {
      fontFamily: 'Arial',
      fontSize: 36,
      fill: 0x333333, 
      align: 'center',
    })
    // 设置游戏结束文字的位置
    gameOverText.position.set(window.innerWidth/2, window.innerHeight/2);
    // 设置游戏结束文字的锚点
    gameOverText.anchor.set(0.5);
    // 将游戏结束文字添加到容器中
    container.addChild(gameOverText);
    // 结束文案的点击事件
    gameOverText.interactive = true;
    gameOverText.on('click', () => {
     location.reload(); 
    })
  }
  
});
// 游戏结束函数
function gameOver() {
  isGameStart = false;
}

// 监听键盘事件
document.addEventListener('keydown',(e)=>{
  if(e.code === 'Space') {
    console.log('Space');
    runAnimation.visible = false;
    jumpSprite.visible = true;
    jumpVelocity = 20;
  } 
})



export default {
  name: 'App',
  
}
</script>

<style>
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
canvas {
  width: 100vw;
  height: 100vh;
  position: absolute;
  left: 0;
  top: 0;
}
</style>
